<template>
   <el-row type="flex" style="flex: 1;">
        <!-- 左侧 -->
        <el-col :span="8" class="flex-f flex-col  111">
          <el-row class="flex-f" style="height: 27px">
            <el-col :span="24" class="flex-c flex-f">
              <div
                class="echart-box flex-c flex-f"
                style="background: none; border-bottom: none"
              >
                <div class="echart-head"></div>
              </div>
            </el-col>
          </el-row>
          <el-row
            class="flex-f flex-c 123312312"
            v-for="(item, i) in columnData"
            :key="item.id || i"
          >
            <el-col :span="24" class="flex-f flex-c">
              <div class="dv-section flex-f flex-c">
                <div class="dv-title">
                  <!-- {{ $t("cockpit.incomingMaterialInspectionTasks") }} -->
                  <span :style="{ color: i == 1 ? '#FF6347' : '#fff' }">{{
                    title[i].name
                  }}</span>
                </div>
                <el-row class="flex-f flex-c">
                  <el-col :span="24" class="flex-c flex-f">
                    
                    <div :ref="'echart' + (i + 1)" class="flex-f flex-c"></div
                  ></el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="16" class="flex-c flex-f flex-col">
          <el-row class="flex-f" style="height: 27px">
            <el-col :span="24" class="flex-c flex-f">
              <div class="echart-box flex-c flex-f">
                <div class="echart-head">
                  <div class="title">
                    <div class="head-selection">
                      <el-select
                        style="width: 120px"
                        class="mr10"
                        size="mini"
                        v-model="queryParams.dataType"
                        placeholder="请选择维度"
                        @change="changeDataType"
                      >
                        <el-option
                          v-for="item in Dimension"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="title">
                    <div class="head-selection">
                      <el-select
                        style="width: 120px"
                        class="mr10"
                        size="mini"
                        v-model="queryParams.sort"
                        placeholder="正序/倒序"
                        @change="changeSort"
                      >
                        <el-option
                          v-for="item in sortList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="flex-c flex-f">
            <el-col :span="12" class="flex-c flex-f">
              <div class="echart-box flex-c flex-f" style="margin-bottom: 8px">
                <div class="echart-head">
                  <div class="title">
                    <div class="head-selection">
                      <el-select
                        style="width: 180px"
                        class="mr10"
                        size="mini"
                        filterable
                        multiple
                        :collapse-tags="true"
                        v-model="queryParams.divisionId"
                        placeholder="组件事业部"
                        @change="changedivision"
                      >
                        <el-option
                          v-for="item in deptList"
                          :key="item.divisionId"
                          :label="item.divisionName"
                          :value="item.divisionId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <el-row class="flex-c flex-f flex-col">
                  <el-col
                    :span="24"
                    class="flex-c flex-f"
                    v-for="(item, i) in columnData2"
                    :key="item.id || i"
                  >
                    <div :ref="'echart' + (i + 4)" class="flex-f flex-c"></div
                  ></el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12" class="flex-c flex-f">
              <div class="echart-box flex-c flex-f" style="margin-bottom: 8px">
                <div class="echart-head">
                  <div class="title">
                    <div class="head-selection">
                      <el-select
                        style="width: 180px"
                        size="mini"
                        v-model="queryParams.baseId"
                        filterable
                        multiple
                        :collapse-tags="true"
                        placeholder="全部基地"
                        @change="changeBase"
                      >
                        <el-option
                          v-for="item in factoryList"
                          :key="item.baseId"
                          :label="item.baseName"
                          :value="item.baseId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="title" v-if="queryParams.dataType != 1">
                    <div class="head-selection">
                      <el-select
                        style="width: 120px"
                        size="mini"
                        v-model="queryParams.notes"
                        filterable
                        placeholder="请选择"
                        @change="changeABC"
                      >
                        <el-option
                          v-for="item in noteList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <el-row class="flex-c flex-f flex-col">
                  <el-col
                    :span="24"
                    class="flex-c flex-f"
                    v-for="(item, i) in columnData3"
                    :key="item.id || i"
                    ><div :ref="'echart' + (i + 7)" class="flex-f flex-c"></div
                  ></el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
</template>

<script>
export default {

}
</script>

<style>

</style>